<template>
    <div class="competition-item-block">
        <img :src="item.image_url" width="200px" height="150px">
        <div>
            <div class="first-div">
                <hgroup>
                    <span v-if="!item.subFlag">未报名</span>
                    <h2>{{ item.competition_name }}</h2>
                    <div v-for="(item,index) in label" :key="index">{{ item }}</div>
                </hgroup>
                <div>
                    <!-- <span style="margin-right:10px">{{ $t('langObj.bonus') }}</span>¥{{ (Number(item.bouns) / 10000)}}万 -->
                </div>
            </div>
            <div class="second-div">
                    {{ item.desc }}
            </div>
            <div class="third-div">
                <div>
                    {{ $t('langObj.organizer') }}:<b>{{ item.owner_user_name }}</b>
                    {{ $t('langObj.participants') }}<span>{{ item.joinMemberCount }}</span>
                    {{ $t('langObj.team') }}<span>{{ item.joinCount }} </span> 
                    {{ start_time }} - {{ end_time }}
                </div>
                <div class="status" :style="style">{{ message }}</div>
            </div>
        </div>
    </div>
</template>

<script>
import { formatData } from '@/utils/format'
export default {
    name:"competitionItem",
    props:{
        item:{
            type:Object,
            required:true
        }
    },
    data(){
        return{
            message:""
        }
    },
    computed:{
        start_time(){
            return formatData(this.item.start_time)
        },
        end_time(){
            return formatData(this.item.end_time)
        },
        label(){
            if(this.item){
                return this.item.label.split("，")
            } 
        },
        style(){
            if(this.item.status === 2 && this.item.subFlag === false){
                this.message = this.$t('langObj.baoming');
                return{
                    background:"#68AAFD"
                }
            }else if(this.item.status === 3 && this.item.subFlag === false){
                this.message = "报名结束";
                return{
                    background:"#B9BFC5"
                }
            }else if(this.item.status === 4){
                this.message = this.$t('langObj.matchOver');
                return{
                    background:"#818FA1"
                }
            }else{
                this.message= this.$t('langObj.submitResult');
                return{
                    background:"#91CD03"
                }
            }
        }
    },
    methods:{

    },
}
</script>
<style lang="scss" scoped>
        .competition-item-block{
            width: 1200px;
            padding: 50px 25px;
            background-color: #fff;
            border-top: 1px solid #f7f7f7;
            display: flex;
            justify-content: space-between;

            &:hover{
                cursor: pointer;
                background-color: #f9fafa;
            }
            & > div{
                margin-left: 22px;
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .first-div{
                    display: flex;
                    justify-content: space-between;
                    color:#333;
                    hgroup{
                        display: flex;
                        align-items:center;
                            span:first-of-type{
                                display: inline-block;
                                text-align: center;
                                line-height: 25px;
                                width: 48px;
                                height: 25px;
                                font-size:12px;
                                color: #7a6643;
                                background-color: #faecd3;
                                margin-right: 6px;
                                border-radius: 4px;
                            }
                            div{
                                width:83px;
                                height:20px;
                                margin-left:20px;
                                line-height:20px;
                                text-align: center;
                                background:rgba(122,179,250,1);
                                border-radius:10px;
                                font-size:10px;
                                font-weight:400;
                                color:rgba(255,255,255,1);
                            }
                    } 
                
                    div{
                        font-size:18px;
                        font-weight: 600;
                        color:#C2142F;
                    }                    
                }
               .second-div{
                    font-size:12px;
                    font-weight:400;
                    color:rgba(153,153,153,1);
                }
               .third-div{
                    display: flex;
                    justify-content: space-between;
                    align-items:flex-end;
                    font-size:12px;
                    color: #828a92;

                    b,span{
                        margin:0 40px 0 10px;
                    }
                    span{
                        font-size: 14px;
                        color:#C2142F;
                    }
                    .status{
                        width:103px;
                        height:32px;
                        border-radius:6px;
                        line-height:32px;
                        text-align: center;
                        font-weight:400;
                        color:rgba(254,254,254,1);
                        
                    }
                }   
            }
        }
</style>